<template>
  <div class="emailmo">
    <memberCentreNav></memberCentreNav>
    <div class="writing_right">
      <div class="TitleList">
        <div class="TitleList_padding">
          <div class="TitleList_top">
            <div class="TitleList_top_title"><span></span>邮箱修改</div>
          </div>
        </div>

        <div class="emailmo_step">
              <div class="emailmo_step_list on">
                <div class="step_list_icon">1</div>
                <div class="step_list_title">验证身份</div>
              </div>
              <span></span>
              <div class="emailmo_step_list on">
                <div class="step_list_icon">2</div>
                <div class="step_list_title">修改安全邮箱</div>
              </div>
              <span></span>
              <div class="emailmo_step_list">
                <div class="step_list_icon">3</div>
                <div class="step_list_title">完成</div>
              </div>
            </div>

        <div class="emailmo_content">
          <div class="emailmo_content_list">
            <div class="content_list_left">电子邮箱</div>
            <div class="content_list_right"><input type="email" v-model="phone" ref="phoneInput" placeholder="请输入电子邮箱"/>
            </div>
          </div>
          <div class="emailmo_content_list sendCode">
            <div class="content_list_left">验证码</div>
            <div class="content_list_right">
              <input type="text" v-model="code" placeholder="请输入验证码"/>
              <button @click="sendCode" :disabled="counting">{{ counting ? `${countDown}秒后重试` : '获取验证码' }}</button>
            </div>
          </div>
          <div class="emailmo_content_submit" @click="login" :disabled="!phone || !code">修改</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import memberCentreNav from "@c/common/memberCentreNav/memberCentreNav";

export default {
  name: "emailStepTwo",
  data() {
    return {
      phone: '',
      code: '',
      countDown: 60,
      counting: false,
    };
  },
  components: {
    memberCentreNav
  },
  methods: {
    sendCode() {
      // 判断手机号码是否为空
      if (!this.phone) {
        this.$refs.phoneInput.focus();
        this.$message({
          message: '请输入邮箱!',
          type: 'warning'
        });
        return;
      }

      this.axios.get('/api/common/sendVerifyCode', {
        params: {
          to: this.phone,
          type: 2,
          is_exits: -1
        }
      }).then(res => {
        // 启动倒计时
        this.counting = true;
        let interval = setInterval(() => {
          if (this.countDown > 0) {
            this.countDown--;
          } else {
            this.counting = false;
            this.countDown = 60;
            clearInterval(interval);
          }
        }, 1000);
      })
    },
    login() {
      // 判断手机号码和验证码是否为空
      if (!this.phone || !this.code) {
        this.$refs.phoneInput.focus();
        this.$message({
          message: '请输入邮箱和验证码!',
          type: 'warning'
        });
        return;
      }
      let that = this;
      that.axios.post('/api/member/checkEmailStep2',{
        email: that.phone,
        code: that.code
      }).then(res => {
        if(res.code === 1) {
          window.location.href = '/#/memberCentre/basicInformation/EmailStepThree';
        }
      })

    },
  },
  mounted() {
    this.axios.post('/api/member/canEmailStep2').then(res => {
      if(res.code === 1) {
        if(!res.result){
          window.location.href = '/#/memberCentre/basicInformation/emailFirstStep';
        }
      }
    })
  },
}
</script>

<style>
@import "emailFirstStep.css";
</style>
